<head>
  <meta charset=UTF-8>
</head>
<body>
<div id="test1">
  整体添加CSS样式的元素
</div><br/>
<div id="test2">
  采用css(properties)方法添加css样式的元素
</div><br/>
<div id="test3" style="position:absolute;">
  可以自由移动的元素
</div>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<script type="text/javascript">
  //为id为test1的元素设置class="text"
  $("#test1").addClass("test");
  //为id为test2的元素设置内联css样式
  $("#test2").css({border:"1px solid black" , color:"#888"});
  //获取id为test3的元素
  var target = $("#test3")
    //设置背景色
    .css("background-color" , "#cccccc")
    .css("padding" , 10)
    //设置宽度
    .width(200)
    //设置高度
    .height(80)
    //设置位置
    .css("left" , 40)
    .css("top" , 64);
  //获取target的位置
  var posi = target.position();
  console.log("target的X坐标为:" + posi.left + "\n"
    + "target的Y坐标为:" + posi.top);
</script>
</body>
